<template>
    <div class="container">
        <el-row>
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">
                <el-form-item label="客户姓名：" prop="customerName">
                    <el-col :span="12">
                        <el-input v-model="form.customerName" placeholder="请输入客户姓名"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="客户电话：" prop="customerPhone">
                    <el-col :span="12">
                        <el-input v-model="form.customerPhone" placeholder="请输入客户电话"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="客户来源：" prop="customerSource">
                    <el-col :span="12">
                        <el-input v-model="form.customerSource" placeholder="请输入客户来源"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="收件人姓名：" prop="consignee">
                    <el-col :span="12">
                        <el-input v-model="form.consignee" placeholder="请输入收件人姓名"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="收件人电话：" prop="consigneePhone">
                    <el-col :span="12">
                        <el-input v-model="form.consigneePhone" placeholder="请输入收件人电话"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="收件备注：" prop="consigneeRemark">
                    <el-col :span="12">
                        <el-input v-model="form.consigneeRemark" placeholder="请输入收件备注"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="产品名称：" prop="productName">
                    <el-col :span="12">
                        <el-input v-model="form.productName" placeholder="请输入产品名称"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="理财经理：" prop="financialManager">
                    <el-col :span="12">
                        <el-input v-model="form.financialManager" placeholder="请输入理财经理"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="身份证号码：" prop="idcard">
                    <el-col :span="12">
                        <el-input v-model="form.idcard" placeholder="请输入身份证号码"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="付息账号：" prop="payInterestAccount">
                    <el-col :span="12">
                        <el-input v-model="form.payInterestAccount" placeholder="请输入付息账号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="付息银行：" prop="payInterestBank">
                    <el-col :span="12">
                        <el-input v-model="form.payInterestBank" placeholder="请输入付息银行"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="打款金额：" prop="payMoney">
                    <el-col :span="12">
                        <el-input-number v-model="form.payMoney" :min="0"></el-input-number>
                        <span style="margin-left: 10px">元</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="认购金额：" prop="buyMoney">
                    <el-col :span="12">
                        <el-input-number v-model="form.buyMoney" :min="0"></el-input-number>
                        <span style="margin-left: 10px">元</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="打款时间：" prop="payTime">
                    <el-col :span="12">
                        <el-date-picker v-model="form.payTime" type="date" placeholder="选择打款时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="团队负责人：" prop="teamOwner">
                    <el-col :span="12">
                        <el-input v-model="form.teamOwner" placeholder="请输入团队负责人"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="年化收益率(%)：" prop="yearIncomeRate">
                    <el-col :span="12">
                        <el-input-number v-model="form.yearIncomeRate" :min="0"></el-input-number>
                        <span style="margin-left: 10px">%</span>
                    </el-col>
                </el-form-item>
                <!-- <el-form-item label="分期方式" prop="calcType">
                    <el-col :span="12">
                        <el-select v-model="form.calcType">
                            <el-option label="季付" value="季付"></el-option>
                            <el-option label="半年付" value="半年付"></el-option>
                            <el-option label="年付" value="年付"></el-option>
                            <el-option label="自定义" value="自定义"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item> -->
                <el-form-item label="间隔周期：" prop="interval">
                    <el-col :span="12">
                        <el-input-number v-model="form.interval" :min="0"></el-input-number>
                        <span style="margin-left: 10px">月/期</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="序号：" prop="sn">
                    <el-col :span="12">
                        <el-input v-model="form.sn" placeholder="请输入序号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="起息时间：" prop="valueTime">
                    <el-col :span="12">
                        <el-date-picker v-model="form.valueTime" type="date" placeholder="选择起息时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="起息日：" prop="valueDay">
                    <el-col :span="12">
                        <el-input v-model="form.valueDay" placeholder="请输入起息日"></el-input>
                    </el-col>
                    <el-col :span="4"><span>（具体某一天）</span></el-col>
                </el-form-item>
                <el-form-item label="到期时间：" prop="endTime">
                    <el-col :span="12">
                        <el-date-picker v-model="form.endTime" type="date" placeholder="选择到期时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item class="radio-user" label="计息类型：" label-width="70" prop="valueType">
                    <el-col :span="12">
                        <el-radio-group v-model="form.valueType">
                            <el-radio :label="1">首日</el-radio>
                            <el-radio :label="2">尾日</el-radio>
                            <el-radio :label="3">首位日</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>
                <el-form-item label="付息次数：" prop="times">
                    <el-col :span="12">
                        <el-input style="width: 200px" type="number" v-model="form.times" clearable />
                        <span style="margin-left: 10px">次</span>
                    </el-col>
                </el-form-item>
                <el-form-item ref="img" label="上传附件：" prop="attachment">
                    <Upload @fileListChange="fileListChange" ref="myUpload" :drag="true" :accept="imgType" fileType="image" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')" :loading="loading">保存</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import { add } from "@/api/order";
    import { Message } from "element-ui";
    import Upload from "@/components/UploadFile";
    import { imgTypeArr } from "@/utils/enumConfig";

    export default {
        name: "orderAdd",
        components: {
            Upload,
        },
        data() {
            const _checkPhone = (rule, value, callback) => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    return callback(new Error("手机号格式错误"));
                }
                callback();
            };
            const _checkIdCard = (rule, value, callback) => {
                if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
                    return callback(new Error("身份证号格式错误"));
                }
                callback();
            };
            return {
                loading: false,
                imgType: imgTypeArr.join(","),
                form: {
                    buyMoney: "",
                    valueDay: "",
                    endTime: "",
                    customerName: "",
                    customerPhone: "",
                    customerSource: "",
                    consignee: "",
                    consigneePhone: "",
                    consigneeRemark: "",
                    productName: "",
                    financialManager: "",
                    idcard: "",
                    payInterestAccount: "",
                    payInterestBank: "",
                    payMoney: "",
                    payTime: "",
                    valueType: 1,
                    times: "",
                    teamOwner: "",
                    yearIncomeRate: "",
                    valueTime: "",
                    // calcType: "",
                    interval: "",
                    sn: "",
                    attachment: "",
                },
                rules: {
                    customerPhone: [{ required: true, validator: _checkPhone, trigger: "blur" }],
                    idcard: [{ required: true, validator: _checkIdCard, trigger: "blur" }],
                    // calcType: [{ required: true, message: "分期方式不能为空", trigger: "blur" }],
                    interval: [{ required: true, message: "间隔周期不能为空", trigger: "blur" }],
                    // valueType: [{ required: true, message: "选项不能为空" }],
                },
            };
        },
        mounted() {
            //   tinymce.init({})
        },
        methods: {
            onSubmit(formName) {
                const { validate } = this.$refs[formName];
                validate((valid) => {
                    if (valid) {
                        this._submitData(this.form);
                    }
                });
            },
            async _submitData(params) {
                this.loading = true;
                let res = await add(params);
                this.loading = false;
                if (res.code === 1) {
                    Message({
                        message: "保存成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                }
            },
            fileListChange(arr) {
                if (arr.length === 0) {
                    this["form"]["attachment"] = "";
                } else {
                    this["form"]["attachment"] = arr[0]["url"];
                    this.$refs.img.clearValidate();
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        padding: 20px;
    }
</style>
